<template>
    <div>
        <a-form-model
                style="text-align: center"
                ref="emailBindForm"
                :rules="bindEmailRules"
                :model="emailVerifyData"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
        >
            <a-form-model-item ref="email" label="邮箱地址" prop="email">
                <a-input
                        v-model="emailVerifyData.email"
                />

            </a-form-model-item>
            <a-form-model-item ref="code" label="验证码" prop="code">
                <a-input
                        v-model="emailVerifyData.code"
                />
                <a-button type="primary" @click="fetchCode" :disabled="!isStop||emailVerifyData.email.length<=0">
                    {{sendCodeMsg}}
                </a-button>

            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" @click="commitBind('emailBindForm')"
                          :disabled="emailVerifyData.email.length<=0||emailVerifyData.code.length<=0">
                    提交
                </a-button>

            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
    import verifyApi from "../../../api/user/account/verifyApi";

    export default {
        name: "EmailBind",
        data() {
            return {
                email: "",
                labelCol: {span: 8},
                wrapperCol: {span: 8},
                emailVerifyData: {
                    email: "",
                    code: ""
                },
                bindEmailRules: {
                    email: [
                        {required: true, message: '请输入绑定的邮箱', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ],
                },
                isStop: true,
                sendCodeMsg: "点击获取邮件验证码"
            }
        },
        methods: {
            fetchCode() {
                let seconds = 20;
                this.isStop = false;

                const that = this; //在setInterval中，this不是vue实例，需要使用that转一下

                verifyApi.bindEmailSendEmailCode(this.emailVerifyData.email).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success("发送成功", 1);
                        let id = setInterval(function () {
                            that.sendCodeMsg = seconds + "秒后可再次获取";
                            if (seconds === 0) {
                                clearInterval(id);
                                that.sendCodeMsg = "点击获取邮件验证码";
                                that.isStop = true;
                            }
                            seconds--;
                        }, 1000);
                    } else {
                        that.sendCodeMsg = "点击获取邮件验证码";
                        that.isStop = true;
                    }
                });
            },
            /**
             * 提交绑定邮箱
             */
            commitBind(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        verifyApi.bindEmail(this.emailVerifyData.email, this.emailVerifyData.code).then(resp => {
                            if (resp.data.flag) {
                                this.$message.success(resp.data.message)
                                this.emailVerifyData = {
                                    email: "",
                                    code: ""
                                }
                            }
                        })


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>